class Magnifying {
  constructor(el) {
    this.el = document.querySelector(el)
    this.img = this.el.querySelector('.img')
    this.mask = this.el.querySelector('.mask')
    this.enlarge = this.el.querySelector('.enlarge')
    this.ulLiObjs = this.el.querySelectorAll('ul li')
    console.log(this.ulLiObjs);
    this.init()
  }
  init() {
    this.overOut()
    this.imgMove()
    this.maskMove()
    this.smallImgChange()
  }
  smallImgChange() {
    //点击切换小图
    this.ulLiObjs.forEach((item,i) => {
      item.onclick = () => {
        console.log(1);
        this.el.querySelector('ul li.active').className = ''
        item.className = 'active'  
        this.img.style.backgroundImage = `url(./imgs/${i+1}.jpg)`
        this.enlarge.style.backgroundImage = `url(./imgs/${i+1}.big.jpg)`
      }
    })
  }
  overOut() {
    this.img.onmouseover = () => this.mask.style.display = this.enlarge.style.display = 'block'
    this.img.onmouseout = () => this.mask.style.display = this.enlarge.style.display = 'none'
  }
  getStyle(eventObj, cssAttribute) {
    return window.getComputedStyle ? window.getComputedStyle(eventObj)[cssAttribute] : eventObj.currentStyle[cssAttribute]
  }
  imgMove() {
    let maskX = parseInt(this.getStyle(this.mask, 'width'))
    let maskY = parseInt(this.getStyle(this.mask, 'height'))
    //console.log(maskX, maskY);
    let imgX = parseInt(this.getStyle(this.img, 'width'))
    let imgY = parseInt(this.getStyle(this.img, 'height'))
    //console.log(imgX, imgY);
    let enlargeBgSize = this.getStyle(this.enlarge, 'background-size').split(' ')
    let enlargeBgSizeX = parseInt(enlargeBgSize[0])
    let enlargeBgSizeY = parseInt(enlargeBgSize[1])
    // console.log(enlargeBgSizeX, enlargeBgSizeY);
    let enlargeX = maskX * enlargeBgSizeX / imgX
    let enlargeY = maskY * enlargeBgSizeY / imgY
    this.enlarge.style.width = enlargeX + 'px'
    this.enlarge.style.height = enlargeY + 'px'
    //console.log(this.enlarge.style.backgroundPosition);
  }
  maskMove() {
    this.img.onmousemove = (evt) => {
      let e = evt || window.event
      let maskLeft = e.pageX - this.el.offsetLeft - this.mask.offsetWidth / 2
      let maskTop = e.pageY - this.el.offsetTop - this.mask.offsetHeight / 2
      if (maskLeft < 0) maskLeft = 0
      if (maskTop < 0) maskTop = 0
      let maxLeft = this.img.clientWidth - this.mask.offsetWidth
      let maxTop = this.img.clientHeight - this.mask.offsetWidth
      if (maskLeft > maxLeft) maskLeft = maxLeft
      if (maskTop > maxTop) maskTop = maxTop
      this.mask.style.left = maskLeft + 'px'
      this.mask.style.top = maskTop + 'px'
      //console.log(maskLeft,maskTop);
      this.tbEnlarge(maskLeft, maskTop)
    }
  }
  tbEnlarge(maskLeft, maskTop) {
    let imgX = parseInt(this.getStyle(this.img, 'width'))
    let imgY = parseInt(this.getStyle(this.img, 'height'))
    //console.log(imgX, imgY);
    let enlargeBgSize = this.getStyle(this.enlarge, 'background-size').split(' ')
    let enlargeBgSizeX = parseInt(enlargeBgSize[0])
    let enlargeBgSizeY = parseInt(enlargeBgSize[1])
    // console.log(enlargeBgSizeX, enlargeBgSizeY);
    let x = maskLeft * enlargeBgSizeX / imgX
    let y = maskTop * enlargeBgSizeY / imgY
    //console.log(enlargeBgSizeX / imgX);
    // console.log(enlargeX,enlargeY);
    this.enlarge.style.backgroundPosition = `-${x}px -${y}px`
  }
}
